<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="equipCheckDialog"
	 :closeOnClickModal='false' :append-to-body='true'>
		<span slot="title" class="dialog-title">
		  	仪器使用记录
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div class="equipform">
			<div style="height:40px;line-height:40px;">仪器使用记录</div>
			<el-table :data="useBeans" style="width: 100%;height:100px" class="tableCon" size="mini">
                <el-table-column label="序号" min-width="40px">
                    <template slot-scope="scope">
                    {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column property="startDate" label="开机时间" min-width="125px" :formatter = "formatterDate">
				</el-table-column>
                <el-table-column property="endDate" label="关机时间" min-width="125px" :formatter = "formatterDate">
				</el-table-column>
                <el-table-column property="temperature" label="温度(℃)" min-width="60px">
                </el-table-column>
                <el-table-column property="humidity" label="湿度(%)" min-width="60px">
                </el-table-column>
                <el-table-column property="runStatus" label="状况" min-width="100px" show-overflow-tooltip>
                </el-table-column>
				<el-table-column property="isMain" label="类型" min-width="80px" >
					<template slot-scope="scope">
						{{scope.row.isMain == true ? '主仪器':(scope.row.isMain == false ? "辅仪器" :"")}}
					</template>
                </el-table-column>
            </el-table>
		</div>
		<div class="equipTable">
			<div style="height:40px;line-height:40px;">测试前检查</div>
			<el-table :data="equipPreUseList" style="width: 100%" height="40%" size="mini"  ref="multipleTable"
			 v-if="reload">
				<el-table-column label="序号" min-width="40px" >
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="content" label="检查项" min-width="200px" :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column property="doPass" label="检查结果" min-width="150px">
					<template slot-scope="scope">
						<el-select v-model="scope.row.doPass" size="mini" disabled>
							<el-option v-for="item in isPass" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column property="remark" label="备注" min-width="100px">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.remark"  disabled></el-input>
					</template>
				</el-table-column>
			</el-table>
			<div style="height:40px;line-height:40px;">测试后检查</div>
			<el-table :data="equipUseList" style="width: 100%;" height="40%" size="mini"  ref="multipleTable1"
			 v-if="reload">
				<el-table-column label="序号" min-width="40px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="content" label="检查项" min-width="200px" :show-overflow-tooltip="true">
				</el-table-column>

				<el-table-column property="doPass" label="检查结果" min-width="150px">
					<!--{0 不通过 1 通过}-->
					<template slot-scope="scope">
						<el-select v-model="scope.row.doPass" size="mini" disabled>
							<el-option v-for="item in isPass" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column property="remark" label="备注" min-width="100px">
					<template slot-scope="scope">
						<el-input size="mini" v-model="scope.row.remark" disabled></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {

			return {
				equipPreUseList: [],
				equipUseList: [],
				isPass: [{
					value: false,
					label: '不通过'
				}, {
					value: true,
					label: '通过'
				}],
				preUseSelection: [], //使用前检查项
				beforeUseSelection: [],//使用后检查项
				reload: true,

				equipForm: {
					startDate: "",
					endDate: "",
					temperature: "",
					humidity: "",
					runStatus: "",
				},
				equipRules: {
					startDate: [{required:true,message:'请选择开机时间',trigger: 'change'}],
					endDate: [{required:true,message:'请选择关机时间',trigger: 'change'}],
					temperature: [{required:true,message:'请填写温度',trigger: 'blur'}],
					humidity: [{required:true,message:'请填写湿度',trigger: 'blur'}],
					runStatus: [{required:true,message:'请填写状况',trigger: 'blur'}],
				},
				useBeans:[],
				equipTabsValue:"",
				equipArr:[],


			}
		},
		computed: {
			...mapState(['typeQcSelect']),
			sampleTableHeight() {
				return ((window.innerHeight - 310))
			},
		},
		components: {

		},
		props: ['addVisible', 'equipmentId', 'testpanelData'],
		mounted() {
			this.$store.dispatch('dogetDictionary')
		},
		watch: {
			addVisible(val, oldVal) {
				if (val) {
					this.readEquipmentUse();
					console.log(this.testpanelData)
				}
			}
		},
		methods: {
			// 处理状态
			formatterStatus(row, column, cellValue, index) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.testBatchStatus })
			},
			// qc类型
			formatterQcType(row, column, cellValue, index) {
				return this.util.codeChangeName({ cellValue: cellValue, list: this.typeQcSelect.itemList })
			},
			// 处理时间
			formatterDate(row, column, cellValue) {
				if(cellValue == '' || cellValue == undefined || cellValue == null){
					return ''
				}else{
					return cellValue.substring(0, 16)
				}
				
			},
			// 读取使用记录
			readEquipmentUse(){

				this.$http({
					method: 'post',
					apiUrl: '/resource/readEquipmentUse.htm',
					params: {fRef:this.testpanelData.equipment,batch:this.testpanelData.id},
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.equipForm = res.data;
						this.useBeans =  res.data.use;
						this.equipPreUseList = res.data.before;
						this.equipUseList = res.data.after;
					}

				})
			},
			//关闭
			close(formName) {
				this.$emit('update:addVisible', false);
				this.equipForm = {
					startDate: "",
					endDate:"",
					temperature: "",
					humidity: "",
					runStatus: "",
				}
			},

		}
	}

</script>
<style scoped>

</style>
<style>
	.equipCheckDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.equipCheckDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.equipCheckDialog .equipUseRecord .el-form-item {
		width: 49%;
		float: left;
		margin-bottom: 10px;
	}

	.equipCheckDialog .equipform {
		height: 140px;
	}

	.equipCheckDialog .equipTable {
		height: calc(100% - 140px);
		clear:both;
	}
	.equipTable .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color: #409EFF !important;
	}
	.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color:#fff;
	}
</style>